<template>
	<view class="archives">
		<view class="archives_top">
			<view class="archives_top_round"><image src="https://cos.ryz1620.com/liankun/static/background.png" /></view>
			<!-- 自定义导航栏 -->
			<!-- <navBar>
				<view slot="center" @click="back"></view>
			</navBar> -->
			<nav-bars  bgColor="#fff" fontColor="#000" title="看案例">
				<text class="iconfont icon-go"></text>
			</nav-bars>
			<!-- 信息 -->
			<view class="garden">
				<view class="garden_left">
					<view class="garden_left_name">三亚湾海岸花园</view>
					<view class="garden_left_specifications"><text>200m²</text><text>3室2厅</text><text>1期</text><text>王女士</text></view>
				</view>
				<view class="garden_right"></view>
			</view>
		</view>
		<view class="archives_content">
			<view class="archives_content_top">
				<view class="archives_content_top_left">全屋-水电图</view>
				<view class="archives_content_top_right"></view>
			</view>
			<view class="archives_content_title">
				这是关于水电图的说明文字,这是关于水电图的说明文字,
				这是关于水电图的说明文字,这是关于水电图的说明文字,
				这是关于水电图的说明文字,这是关于水电图的说明文字,
				这是关于水电图的说明文字。
			</view>
			<view class="archives_content_image">
				<view class="image"></view>
				<view class="image"></view>
				<view class="image"></view>
				<view class="image"></view>
				<view class="image"></view>
				<view class="image"></view>
				<view class="image"></view>
				<view class="image"></view>
				<view class="image"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta:1,
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.archives {
		
		&_top {
			width: 750rpx;
			height: 458rpx;
			position: relative;
			
			&_round {
				width: 100%;
				height: 458rpx;
				position: absolute;
				bottom: 0rpx;
				left: 0rpx;
				z-index: 1;
			}
			
			//自定义导航栏
			/deep/.N_iCenter {
				justify-content: flex-start;
				flex: none;
				width: 240rpx;
				height: 88rpx;
				padding-left: 36rpx;
				color: rgba($color: #fff, $alpha: 0.9);
			}
			/deep/.N_inner {
				background: transparent !important;
			}
			
			// 信息
			.garden {
				width: 100%;
				color: rgba($color: #fff, $alpha: 0.9);
				padding: 20rpx 32rpx 0rpx;
				position: relative;
				z-index: 2;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				
				&_left {
					
					&_name {
						font-size: 36rpx;
						font-weight: bold;
						color: #E7DEC8;
					}
					
					&_specifications {
						margin-top: 16rpx;
						
						text {
							font-size: 22rpx;
							color: #F9F6F3;
							margin-left: 24rpx;
							
							&::after {
								content: '';
								display: inline-block;
								width: 0rpx;
								height: 10rpx;
								border: 1rpx solid #FFFFFF;
								margin-left: 24rpx;
							}
							
							&:first-child {
								margin: 0;
							}
							
							&:last-child::after {
								content: '';
								display: inline-block;
								width: 0rpx;
								height: 0rpx;
								border: 0 none;
								margin: 0;
							}
						}
					}
				}
				
				&_right {
					width: 90rpx;
					height: 90rpx;
					background: skyblue;
					border-radius: 50%;
					border: 2px solid #E7DEC8;
					
					image {
						border-radius: 50%;
					}
				}
			}
		}
	
		.archives_content {
			width: 100%;
			height: 80.64vh;
			padding: 38rpx 32rpx 0rpx;
			overflow: auto;
			background: #fff;
			border-radius: 24rpx 24rpx 0 0;
			position: fixed;
			left: 0rpx;
			bottom: 0rpx;
			z-index: 3;
			
			&_top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				&_left {
					font-size: 30rpx;
					color: #333333;
				}
			}
			
			&_title {
				margin: 28rpx 0rpx 10rpx;
				font-size: 28rpx;
				color: #666666;
			}
			
			&_image {
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				
				.image {
					width: 220rpx;
					height: 220rpx;
					margin-top: 12rpx;
					margin-right: 12rpx;
					border-radius: 4rpx;
					background: skyblue;
					
					&:nth-child(3n){
						margin-right: 0rpx;
					}
				}
			}
		}
	}
</style>
